/* eslint-disable */
<template>
  <div class="root">
    <div class="item">
      <div style="margin-bottom: 5px">文件名</div>
      <el-input size="mini" placeholder="请输入文件名" v-model="exportName"/>
    </div>
    <div class="item">
      <div>图片</div>
      <div class="divider"/>
      <div class="box img">
<!--        <div class="name">格式</div>-->
        <div class="content">
          <el-radio-group v-model="imgType">
            <el-radio label="png">png</el-radio>
            <el-radio label="jpg">jpg</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="commit">
        <el-button type="text" @click="wantExportImg">导出图片</el-button>
      </div>
    </div>
    <div class="item">
      <div>文本</div>
      <div class="divider"/>
      <div class="box img">
<!--        <div class="name">格式</div>-->
        <div class="content">
          <el-radio-group v-model="fileType">
<!--            <el-radio label="xlsx">xlsx</el-radio>-->
            <el-radio label="csv">csv</el-radio>
<!--            <el-radio label="xml">xml</el-radio>-->
          </el-radio-group>
        </div>
      </div>
      <div class="commit">
        <el-button type="text" @click="wantExportFile">导出文件</el-button>
      </div>
    </div>

<!--    <span slot="footer" class="dialog-footer">-->
<!--      <el-button @click="root.visible.exportKg = false">取 消</el-button>-->
<!--      <el-button type="primary" @click="root.visible.exportKg = false">确 定</el-button>-->
<!--    </span>-->
  </div>
</template>

<script>
import { outputFileAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "exportKgComponent",
  data() {
    return {
      KG: this.$parent.$parent.$refs.graphComponent.KG,
      exportName: "",
      imgType: "png",
      fileType: "csv"
    }
  },
  methods: {
    wantExportImg() {
      if(!this.checkName()) return;
      this.covertSVG2Image(this.KG.width,this.KG.height);
    },
    wantExportFile() {
      if(!this.checkName()) return;
      this.exportFile();
    },
    covertSVG2Image(width, height) {
      let loadingMessage = this.$message.loading("图片生成中...");
      let type = this.imgType;
      let name = this.exportName;
      let svg = document.querySelector( "#"+ this.KG.gid + " svg");
      let serializer = new XMLSerializer()
      let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svg)
      let image = new Image()
      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
      let canvas = document.createElement('canvas')
      canvas.width = width
      canvas.height = height
      let context = canvas.getContext('2d')
      context.fillStyle = '#fff'
      context.fillRect(0, 0, 10000, 10000)
      image.onload = function () {
        context.drawImage(image, 0, 0)
        let a = document.createElement('a')
        a.download = `${name}.${type}`
        a.href = canvas.toDataURL(`image/${type}`)
        a.click()
        loadingMessage.close();
      }
      image.onerror = ()=>{
        loadingMessage.close();
      };
    },
    exportFile(){
      let _this = this;
      let exportElMessage = this.$message({
        duration:0,
        iconClass:"el-icon-loading",
        message: '正在加载'
      });
      outputFileAPI(
          { kgID: this.KG.kgInfo.id },

        (data) => {
            let blob = data;
            let reader = new FileReader();  // FileReader主要用于将文件内容读入内存
            reader.readAsDataURL(blob);
            reader.onload = function(e) {
              let a = document.createElement("a");
              // 获取文件名fileName
              // var fileName = res.headers["content-disposition"].split("=");
              // fileName = fileName[fileName.length - 1];
              // fileName = fileName.replace(/"/g, "");
              a.download = _this.exportName + ".csv";
              a.href = e.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            }
          },

          (error) => {
            _this.$message.error("导出文件失败:" + error);
          },

        ()=>{
            exportElMessage.close();
          }
      )
    },
    checkName() {
      if(this.exportName == ""){
        this.$message.warning("请输入导出文件名");
        return false;
      }
      if(this.exportName.length > 25){
        this.$message.error("文件名不应超过25位");
        return false;
      }
      let reg = new RegExp("[<>/\\\\|*\\n?:]");
      if(reg.test(this.exportName)){
        this.$message.error("文件名不能包含< > / \\ | : * ?");
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
.divider {
  margin: 5px auto;
  height: 0.5px;
  width: 100%;
  background-color: #c8c8c8;
}
.item {
  margin-bottom: 30px;
}
.box {
  padding: 0 5px;
}
.box:after {
  content: "clear";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}
.box .name {
  float: left;
  margin-right: 50px;
}
.box .content {
  float: left;
}
.commit {
  float: right;
  margin-right: 10px;
}
</style>
